
import React, {Component} from 'react';
import {StyleSheet, Text, View,
  Dimensions,
  TouchableOpacity,
  FlatList,
} from 'react-native';
import TopBar from '../../bar/TopBar'
import BASEURL from '../../api/api'
import Loading from '../../common/Loading'
import Toast, {DURATION} from 'react-native-easy-toast'
import RefreshListView, {RefreshState} from 'react-native-refresh-list-view';
var {height, width} = Dimensions.get('window');
var noMore = false;
var pageNo = 0;
var pageSize = 10;
export default class NoticeList extends Component<Props> {
  static navigationOptions = ({ navigation }) =>{
    return{
      headerTitle:<TopBar title='通知公告' navigation = {navigation}/>,
      headerLeft:null,//<LeftButton navigation = {navigation} />,
    }
  };
  constructor(props){
    super(props);
    this.state = ({
      data:[],
      loading:true,
    })
    //console.log(this.props)
  }
  componentWillMount(){
    this.fetchData(1);
  }
  onHeaderRefresh = () => {
  }
  onFooterRefresh = () => {
    if(noMore){
  		return;
  	}
  	pageNo++;
  	this.fetchData(pageNo);
    this.setState({refreshState: RefreshState.FooterRefreshing});
  }
  fetchData(page){
    //console.log('url',BASEURL+'getNoticeList')
    fetch(BASEURL+'getNoticeList?pageNo='+page+'&pageSize='+pageSize)
    .then(res=>res.json())
    .then(response=>{
     // console.log('res',response)
      if(response.falg){
        // this.setState({
        //   data:response.noticeList,
        //   loading:false,
        // })
        if(response.noticeList.length<pageSize && pageNo != 1){
          noMore = true
          this.setState({
            data:this.state.data.concat(response.noticeList),
            loading:false,
            refreshState: RefreshState.NoMoreData,
          })
        } else {
          this.setState({
            data:this.state.data.concat(response.noticeList),
            loading:false,
            refreshState: RefreshState.Idle,
          })
        }
      } else {
        this.setState({
          loading:false,
          refreshState:RefreshState.Failure,
        })
        this.refs.toast.show('获取失败');
      }
    })
  }
  _goDetail(item){
    if(this.props.navigation){
      this.props.navigation.push('noticeDetail',{noticeId:item.notice_id})
    }
  }
  _separator = () => {
    return <View style={{height:10,backgroundColor:'#f9f9f9'}}/>;
  }
  _keyExtractor = (item, index) => index.toString();
  _renderItem = ({item,index}) =>{
    var time = item.create_time
    time = time.length>10?time.substring(0,10):time
    return(
      <TouchableOpacity  style={styles.row} activeOpacity={0.5} onPress={()=>this._goDetail(item)}>
        <View style={styles.titleBox}>
          <Text style={styles.titleText}>{item.notice_title}</Text>
        </View>
        <View style={styles.bottomView}>
          <Text style={styles.bottomText}>{item.creator_id}</Text>
          <Text style={styles.bottomText}>{time}</Text>
        </View>
      </TouchableOpacity>
    )
  }
  render(){
    if(this.state.loading){
      return <Loading />
    } else {
      return(
        <View style={{flex:1}}>
          <RefreshListView
            data={this.state.data}
            keyExtractor={this._keyExtractor}
            renderItem={this._renderItem}
            refreshState={this.state.refreshState}
            onHeaderRefresh={this.onHeaderRefresh}
            onFooterRefresh={this.onFooterRefresh}
            // 可选
            footerRefreshingText= '数据加载中...'
            footerFailureText = '--数据加载失败--'
            footerNoMoreDataText= '--没有更多了--'
          />
          <Toast ref="toast"/>
        </View>
      )
    }
    
  }

}
const styles = StyleSheet.create({
  row:{
    padding:15,
  },  
  bottomText:{
    color:'#888',
    fontSize:14,
  },  
  bottomView:{
    flexDirection:'row',
    justifyContent:'space-between',
    alignItems:'center',
    paddingTop:10,
  },  
  titleText:{
    fontSize:14,
    color:'#333',
  },  
  titleBox:{
    paddingBottom:8,
    borderBottomWidth:StyleSheet.hairlineWidth,
    borderBottomColor:'#aaa',
  },
})